<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>HomeWave</title>

	<style type="text/css" media="screen">@import "styles/main.css";</style>
    <style type="text/css" media="screen">@import "styles/jqtouch.css";</style>
    <style type="text/css" media="screen">@import "styles/theme.css";</style>
    
       
    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="scripts/jqtouch.js"></script> 
    <script type="text/javascript" src="scripts/jqtouch.transitions.js"></script> 
    <script type="text/javascript" src="scripts/jquery-plugin-arte.1.6.js"></script> 
	<script type="text/javascript" src="scripts/jqt.floaty.js"></script>
	<script type="text/javascript" src="scripts/hw.js"></script> 
	<script type="text/javascript" src="scripts/hw.toggle.js"></script> 
	<script type="text/javascript" src="scripts/hw.select.js"></script> 
	<script type="text/javascript" src="scripts/hw.push.js"></script> 
	<script type="text/javascript" src="scripts/hw.label.js"></script>
</head>

<body>
<div id="jqt">
	<div class="floaty" id="errorPane">
		<table><tr><td><img src="images/close.gif" alt="" id="closeErrorPane" /></td><td>
		<span id="errorMessage"></span></td></tr></table>
	</div>
	
    <div id="settings">
        <div class="toolbar">
            <h1>Settings</h1>
            <a href="#" class="back">Back</a>
        </div>
        <form>
            <ul class="edit rounded">
                <li><input type="text" name="comPort" placeholder="COM Port" id="comPort" /></li>
                <li><input type="text" name="serverHost" placeholder="Server" id="serverHost" /></li>
            </ul>
        </form>
        <div class='info'><p><strong>You need to manually restart the server after the changes</strong></p></div>
    </div>
    
    <div id="addCategory">
        <div class="toolbar">
            <h1>Add Category</h1>
            <a href="#" class="cancel">Cancel</a>
        </div>
        <ul class="edit rounded">
            <li><input type="text" name="categoryName" placeholder="Category Name" id="categoryName" /></li>
            <li><input type="number" min="0" max="255" step="1" name="categorySortOrder" placeholder="Category Sort Order" id="categorySortOrder" value="0" /></li>
        </ul>
		<a id="addCategoryButton" href="#" style="margin: 10px;" class="whiteButton">Add</a>
    </div>
    
    <div id="addWidgetGroup">
        <div class="toolbar">
            <h1>Add Widget Group</h1>
            <a href="#" class="cancel">Cancel</a>
        </div>
        <ul class="edit rounded">
            <li><input type="text" name="widgetGroupName" placeholder="Widget Group Name" id="widgetGroupName" /></li>
            <li><input type="number" min="0" max="255" step="1" name="widgetGroupSortOrder" placeholder="Widget Group Sort Order" id="widgetGroupSortOrder" value="0" /></li>
        </ul>
		<a id="addWidgetGroupButton" href="#" style="margin: 10px;" class="whiteButton">Add</a>
    </div>
    
    <div id="addWidget">
        <div class="toolbar">
            <h1>Add Widget</h1>
            <a href="#" class="cancel">Cancel</a>
        </div>
        <ul class="edit rounded">
            <li><input type="text" name="widgetName" placeholder="Widget Name" id="widgetName" /></li>
            <li><input type="number" min="0" max="255" step="1" name="widgetSortOrder" placeholder="Widget Sort Order" id="widgetSortOrder" value="0" /></li>
            <li><select id="widgetTypeId"></select></li>
            <li><select id="addWidgetValueList"></select></li>
        </ul>
		<a id="addWidgetButton" href="#" style="margin: 10px;" class="whiteButton">Add</a>
    </div>    
</div>
</body>
</html>


